<template>
  <div>
    <div class="task-list-container">
      <div class="task-item" :class="[task.is_over_time==1 ? 'borderLeft-2': 'borderLeft-3',currentIndex==index ? 'backgroundColor-1': '']"  v-for="(task, index) in taskList" :key="index" @click="taskDetail(index,task.id)">
        <div class="row-line-1 color-1 clearfix">
          <p><span>任务编号：</span>{{task.task_no}}</p>
          <p><span>计划日期：</span>{{task.plan_time}}</p>
        </div>
        <div class="row-line-1 clearfix">
          <p><span>执<i class="space"></i>行<i class="space"></i>人：</span>{{task.exec_user_name}}</p>
          <p><span>截至日期：</span>{{task.end_time}}</p>
        </div>
        <div class="row-line-2 clearfix">
          <span class="span-title">任务主题：</span>
          <span class="span-content">{{task.task_subject}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .task-list-container{
    min-width:450px;
  }
  .task-list-container .task-item{
    border:1px solid #dfe6ec;
    padding:28px 5.6% 18px;
    font-size:14px;
    margin-bottom:20px;
  }
	.task-list-container .task-item:last-of-type{
		margin-bottom:0;
	}
  .task-item p{
    margin:0;
  }
  .task-item .row-line-1{
    margin-bottom:15px;
  }
  .task-item .row-line-1 p{
    float:left;
    display: inline-block;
    widht:182px;
  }
  .task-item .row-line-1 p:last-of-type{
    float:right;
  }
  .task-item .row-line-1 p span{
    width:75px;
    display: inline-block;
  }
	.task-item .row-line-1 p span i{
		display: inline-block;
		width:7px;
	}
  .task-item .row-line-2 .span-title{
    width:80px;
    display: inline-block;
    float:left;
    position:relative;
    top:4px;
  }
  .task-item .row-line-2 .span-content{
    float:left;
    display: inline-block;
    width:79%;
    line-height:25px;
		white-space: pre-wrap;
		word-break: break-all;
  }
  .color-1{
    color:#909399;
  }
  .color-2{
    color:#f56c6c;
  }
  .borderLeft-1{
    border-left:3px solid #409eff!important;
  }
  .borderLeft-2{
    border-left:3px solid #f56c6c!important;
  }
  .borderLeft-3{
    border-left:3px solid #67C23A!important;
  }
  .backgroundColor-1{
    background-color:#fafafa;
  }
</style>
<script>
  export default{
    props: {
      taskList: Array
    },
    data() {
      return {
        currentIndex: 0,
        flag: true
      }
    },
    created() {
    },
    methods: {
      // 展示任务详情
      taskDetail(index, id) {
        this.currentIndex = index
        this.$emit('taskDetail', id)
      }
    }
  }
</script>
